<template>
  <a-modal :open="open" width="1000px" :title="title" centered @ok="onOk" @cancel="onCancel">
    <slot></slot>
    <a-transfer v-model:target-keys="targetKeys" :data-source="mockData" :show-select-all="false" @change="onChange">
      <template #children="{ direction, filteredItems, selectedKeys, onItemSelectAll, onItemSelect }">
        <a-table
          :row-selection="
            getRowSelection({
              selectedKeys,
              onItemSelectAll,
              onItemSelect
            })
          "
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          size="small"
        />
      </template>
    </a-transfer>
  </a-modal>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: () => false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  columnsLeft: {
    type: Array,
    default: () => []
  },
  columnsRight: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: () => ''
  },
  formDlg: {
    type: Object,
    default: () => ({})
  }
})
const { open, columnsLeft, columnsRight } = toRefs(props)
const formState = ref({})
const mockData = [
  {
    xmbh: '000000001',
    xmmc: '手术'
  }
]

for (let i = 0; i < 10; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  })
}
const originTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key)
const targetKeys = ref(originTargetKeys)
const leftColumns = ref(columnsLeft)
const rightColumns = ref(columnsRight)
// const onChange = (nextTargetKeys) => {
// }
const getRowSelection = ({ selectedKeys, onItemSelectAll, onItemSelect }) => {
  return {
    onSelectAll(selected, selectedRows) {
      const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
      onItemSelectAll(treeSelectedKeys, selected)
    },
    onSelect({ key }, selected) {
      onItemSelect(key, selected)
    },
    selectedRowKeys: selectedKeys
  }
}

// const query = () => {
// }

const onOk = async () => {
  const res = await post('/common/patient/savePatientInfo', formState.value)
  if (res.code === 0) {
    message.success('保存成功')
    emit('success')
  } else {
    message.error(res.msg || '保存失败')
  }
}

const onCancel = () => {
  emit('update:open', false)
}
// watch(
//   () => props.open,
//   (val) => {
//     if (val) {
//       query()
//     }
//   }
// )
// defineExpose({
//   formDlg,
//   query
// })
</script>

<style lang="less" scoped>
.ant-form {
  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 80px;
    }
  }
}
</style>
